<script setup lang="ts">
import { computed, defineProps, defineEmits } from 'vue';

import { ElButton, ElIcon } from 'element-plus';

const props = defineProps({
  isEditMode: {
    type: Boolean,
    default: false,
  },
  selectedItem: {
    type: Object,
    default: null,
  },
  hasUnsavedChanges: {
    type: Boolean,
    default: false,
  },
  gridUnitSize: {
    type: Number,
    default: 0,
  },
  canvasWidth: {
    type: Number,
    default: 0,
  },
  availableComponents: {
    type: Array,
    default: () => [],
  },
  layoutItems: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits([
  'toggleEditMode',
  'saveLayout',
  'cancelChanges',
  'removeSelectedItem',
  'resetLayout',
  'loadDefaultLayout',
]);

const selectedItemName = computed(() => {
  if (!props.selectedItem) return '';
  const component = props.availableComponents.find(
    (c: any) => c.type === props.selectedItem.type,
  );
  return component ? component.name : '';
});
</script>

<template>
  <div class="toolbar mb-6 rounded-lg bg-white p-4 shadow-sm">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-4">
        <div class="flex items-center space-x-2">
          <ElIcon size="20" class="text-blue-600">
            <component is="Setting" />
          </ElIcon>
          <h2 class="text-lg font-semibold text-gray-800">24栅格工作台设计器</h2>
        </div>
        <div class="flex items-center space-x-2">
          <ElButton :type="isEditMode ? 'warning' : 'primary'" @click="toggleEditMode">
            <ElIcon class="mr-1">
              <component :is="isEditMode ? 'View' : 'Edit'" />
            </ElIcon>
            {{ isEditMode ? '退出设计' : '开始设计' }}
          </ElButton>
          <ElButton v-if="isEditMode" type="success" @click="saveLayout">
            <ElIcon class="mr-1">
              <component is="Check" />
            </ElIcon>
            保存布局
          </ElButton>
          <ElButton v-if="isEditMode" type="warning" @click="cancelChanges">
            <ElIcon class="mr-1">
              <component is="RefreshLeft" />
            </ElIcon>
            取消修改
          </ElButton>
          <ElButton
            v-if="isEditMode && selectedItem"
            type="danger"
            @click="removeSelectedItem"
          >
            <ElIcon class="mr-1">
              <component is="Delete" />
            </ElIcon>
            删除选中组件
          </ElButton>
          <ElButton v-if="isEditMode" @click="resetLayout">
            <ElIcon class="mr-1">
              <component is="Delete" />
            </ElIcon>
            清空画布
          </ElButton>
          <ElButton
            v-if="!isEditMode && layoutItems.length === 0"
            type="primary"
            @click="loadDefaultLayout"
          >
            <ElIcon class="mr-1">
              <component is="Plus" />
            </ElIcon>
            加载示例
          </ElButton>
        </div>
      </div>
      <div v-if="isEditMode" class="flex items-center space-x-4">
        <div
          class="flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-600"
        >
          <ElIcon class="mr-1">
            <component is="Grid" />
          </ElIcon>
          24栅格模式
        </div>
        <div
          v-if="selectedItem"
          class="flex items-center rounded-full bg-red-50 px-3 py-1 text-sm text-red-600"
        >
          <ElIcon class="mr-1">
            <component is="Select" />
          </ElIcon>
          已选中: {{ selectedItemName }}
        </div>
        <div
          v-if="hasUnsavedChanges"
          class="flex items-center rounded-full bg-orange-50 px-3 py-1 text-sm text-orange-600"
        >
          <ElIcon class="mr-1">
            <component is="Warning" />
          </ElIcon>
          有未保存的修改
        </div>
        <div class="text-sm text-gray-500">
          栅格单元: {{ gridUnitSize.toFixed(1) }}×{{ gridUnitSize.toFixed(1) }}px |
          画布宽度: {{ canvasWidth }}px
        </div>
      </div>
    </div>
  </div>
</template>